import React from 'react'
import { InlineLoader } from './LoadingSpinner'
import { getButtonColor, getShadowColor, ColorVariant } from '../utils/colorUtils'

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger'
  colorVariant?: ColorVariant
  size?: 'sm' | 'md' | 'lg'
  loading?: boolean
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  fullWidth?: boolean
  shadow?: boolean
}

export default function Button({
  children,
  variant = 'primary',
  colorVariant,
  size = 'md',
  loading = false,
  leftIcon,
  rightIcon,
  fullWidth = false,
  shadow = false,
  className = '',
  disabled,
  ...props
}: ButtonProps) {
  const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2'
  
  // 如果指定了colorVariant，使用色彩系统
  const getVariantClasses = () => {
    if (colorVariant) {
      return getButtonColor(colorVariant)
    }
    
    // 否则使用默认的variant样式
    const variantClasses = {
      primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 disabled:bg-blue-400',
      secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 disabled:bg-gray-50 disabled:text-gray-400',
      ghost: 'text-gray-700 hover:bg-gray-100 focus:ring-gray-500 disabled:text-gray-400',
      danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 disabled:bg-red-400'
    }
    return variantClasses[variant]
  }
  
  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-sm',
    lg: 'px-6 py-3 text-base'
  }
  
  const isDisabled = disabled || loading
  const shadowClass = shadow && colorVariant ? getShadowColor(colorVariant) : ''
  
  return (
    <button
      className={`
        ${baseClasses}
        ${getVariantClasses()}
        ${sizeClasses[size]}
        ${fullWidth ? 'w-full' : ''}
        ${isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}
        ${shadowClass}
        ${className}
      `}
      disabled={isDisabled}
      {...props}
    >
      {loading ? (
        <>
          <InlineLoader size={size === 'lg' ? 'md' : 'sm'} className="mr-2" />
          {children}
        </>
      ) : (
        <>
          {leftIcon && <span className="mr-2">{leftIcon}</span>}
          {children}
          {rightIcon && <span className="ml-2">{rightIcon}</span>}
        </>
      )}
    </button>
  )
}
